<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <div class="mainor_te">
          <!-- <el-button @click="editAction()" class="marginLeft10" type="primary">新增</el-button> -->
          <!-- <el-button @click="exportbuVisible = true">导出</el-button> -->
        </div>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="学校名称" prop="name">
            <el-input
              clearable
              v-model.trim="form.name"
              placeholder="学校名称"
              class="wid220"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="学校状态" prop="domain_name">
            <el-select v-model="form.domain_name" clearable placeholder="请选择学校状态" @change="selectAction($event, 'model')">
              <el-option v-for="item in userType" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="客户类型" prop="model">
            
          </el-form-item> -->

          <!-- <div class="more el-form-item" @click="more">
            <span>更多</span>
            <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
          </div> -->

          <!-- <div class="clearfix"></div> -->
          <el-form-item>
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getSchoolList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />

          <el-table-column
            label="学校名称"
            width="130"
            prop="name"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>

          <!-- <el-table-column label="广告位置" prop="manager_name" :show-overflow-tooltip="true" /> -->

          <el-table-column label="学校简图" width="450">
            <template slot-scope="scope">
              <div class="logoStyle">
                <div
                  class="logo"
                  v-for="(item, index) in scope.row.logo"
                  :key="index"
                >
                  <!-- <img :src="item.url" alt=""> -->
                  <el-image class="img" :src="item.url" fit="cover"></el-image>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="创建时间"
            prop="created_at"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="学校审核状态" prop="audit_status">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.audit_status == 1"
                >审核成功</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.audit_status == 0"
                >待审核</el-tag
              >
              <el-tag type="danger" v-else-if="scope.row.audit_status == 2"
                >审核失败</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="学校状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="changeSchoolState($event, scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="editAction(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >审核</el-button
              >
              <!-- <el-button @click="account(scope.row.id)" type="text" size="mini" class="handle_btn">账号</el-button>
              <el-button @click="examine(scope.row.id)" type="text" size="mini" class="handle_btn">审核</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="main_page boxdq">
        <div></div>
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="current.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>

    <el-dialog
      title="学校审核"
      :visible.sync="dialogVisible"
      width="70%"
      @close="closeBox"
      :close-on-click-modal="false"
    >
      <el-form
        :rules="rules"
        ref="agentForm"
        :model="agentForm"
        label-width="80px"
      >
        <el-form-item label="学校名称:" prop="name">
          <span>{{ agentForm.name }}</span>
        </el-form-item>
        <el-form-item label="资质简图:">
          <el-upload
            :action="uploadPath"
            list-type="picture-card"
            :data="{ store: 'saas/contract' }"
            style="min-height: 120px"
            :file-list="filelist"
            :disabled="true"
            :on-preview="handlePictureCardPreview"
          >
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="学校域名:" prop="domain_name">
          <el-input
            style="width: 350px"
            placeholder="请输入学校域名"
            :disabled="disabled"
            v-model="agentForm.domain_name"
          >
            <template slot="append">.jyt.cadj.cn</template>
          </el-input>
        </el-form-item>
        <el-form-item label="域名预览" v-if="agentForm.domain_name">
          <span>{{ agentForm.domain_name }}.jyt.cadj.cn</span>
        </el-form-item>
        <el-form-item label="审核状态:" prop="audit_status">
          <el-select
            class="remark"
            :disabled="disabled"
            v-model="agentForm.audit_status"
            placeholder="请选择审核状态"
          >
            <el-option label="待审核" :value="0"></el-option>
            <el-option label="审核成功" :value="1"></el-option>
            <el-option label="审核失败" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核备注"
            :disabled="disabled"
            v-model="agentForm.desc"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeBox">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="sublemt"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadPath } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { Debounce } from "@/utils/index";
import {
  get_school_list,
  get_school_delete,
  oper_school,
} from "@/api/school/index";
export default {
  name: "advertisement",
  data() {
    return {
      uploadPath,
      form: {
        // 学校名称
        name: null,
        // 广告状态
        domain_name: null,
      },

      userType: [
        {
          name: "开启",
          id: 1,
        },
        {
          name: "关闭",
          id: 2,
        },
      ],

      // 加载功能
      listLoading: false,
      // 列表字段
      list: [],

      // 分页
      current: {
        page: 1,
        limit: 20,
      },
      totalCount: 0,

      // 校验规则
      rules: {
        domain_name: [
          { required: true, message: "请输入学校域名", trigger: "blur" },
        ],
        audit_status: [
          { required: true, message: "请选择审核状态", trigger: "change" },
        ],
        desc: [{ required: true, message: "请输入审核备注", trigger: "blur" }],
      },
      // 新增的模态框
      dialogVisible: false,
      // 新增的表单信息
      agentForm: {
        id: null,
        // 学校名称
        name: null,
        // 备注
        desc: null,
        // 学校域名
        domain_name: null,
        // 审核状态
        audit_status: null,
      },

      // 查看已上传的图片二级模态框
      dialogVisible1: false,
      // 查看已上传的图片链接
      dialogImageUrl: null,

      filelist: [],
      disabled: false,
    };
  },
  filters: {},
  created() {
    // 获取学校列表
    this.getSchoolList();
  },
  methods: {
    getSchoolList() {
      this.listLoading = true;
      let data = {
        name: this.form.name,
        page: this.current.page,
        per_page: this.current.limit,
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      get_school_list(query).then((res) => {
        if (res.errcode == 0) {
          let list = res.data.list;
          this.list = list.map((item) => {
            try {
              item.logo = JSON.parse(item.logo);
              return item;
            } catch (e) {
              return item;
            }
          });
          this.totalCount = res.data.count;
        } else {
          this.$message.error(res.errmsg);
        }
        this.listLoading = false;
      });
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.getSchoolList();
    },
    // 多选
    handleSelectionChange() {},
    // 审核
    editAction(id) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let data = {
        id,
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      get_school_delete(query).then((res) => {
        if (res.errcode == 0) {
          this.agentForm = res.data;
          this.filelist = res.data.qualifications;
          this.dialogVisible = true;
        } else {
          this.$message.error(res.errmsg);
          this.dialogVisible = false;
        }
        loading.close();
      });
    },
    // 切换分页大小
    changeLimit() {},
    // 切换分页
    changePage() {},
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url;
      this.dialogVisible1 = true;
    },
    // 移除文件时的钩子
    handleRemove() {},
    // 切换检索中的广告状态
    selectAction() {},
    // 表单提交
    sublemt: Debounce(function () {
      this.disabled = true;
      let data = {
        domain_name: this.agentForm.domain_name,
        action: "audit",
        id: this.agentForm.id,
        audit_status: this.agentForm.audit_status,
        audit_remark: this.agentForm.audit_remark,
        qualifications: JSON.stringify(this.filelist),
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      oper_school(query).then((res) => {
        if (res.errcode == 0) {
          this.$message.success(res.errmsg);
          this.closeBox();
          this.dialogVisible = false;
          this.getSchoolList();
        } else {
          this.$message.error(res.errmsg);
        }
        this.disabled = false;
      });
    }),
    // 关闭模态框
    closeBox() {
      this.dialogVisible = false;
      this.$refs.agentForm.resetFields();
      this.filelist = [];
      this.dialogImageUrl = null;
    },
    changeSchoolState: Debounce(function (e, row) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let data = {
        status: e,
        id: row.id,
        action: "uptown",
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      oper_school(query).then((res) => {
        if (res.errcode == 0) {
          this.$message.success(res.errmsg);
        } else {
          this.$message.error(res.errmsg);
        }
        loading.close();
        this.getSchoolList();
      });
    }),
  },
};
</script>

<style lang="scss" scoped>
.maincl {
  .more {
    margin-left: 50px;
  }

  .handle_btn {
    padding: 0;
    border: 0;
  }

  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    width: 100%;
  }

  .logoStyle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: auto;

    .logo {
      min-width: 100px;
      width: 100px;
      height: 67px;
      margin-right: 10px;

      .img {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }
  }

  .logoStyle::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }

  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }

      &.hover-row > td {
        background: none !important;
      }

      .current-row > td {
        background: none !important;
      }
    }
  }

  /deep/.main_table .el-table--small td .cell {
    height: auto !important;
  }

  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }

  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }

  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table .cell {
    display: flex;
    align-items: center;
  }

  /deep/.boxdq {
    justify-content: flex-end;
  }
}

.exptitle {
  padding: 10px 0px;
}
</style>